// 思考: 数据如何动态渲染

// 编码:
// 1.0 获取页面相关的标签
var ulElement = document.querySelector(".wrapper ul");
// 2.0 编写函数 渲染html字符串
var template = function(obj) {
    // 创建li标签
    var li = document.createElement("li");
    // 定义字符串变量
    var str = '';
        str +='<a href="detail.html?id='+obj.id+'">'
        str +='    <div>'
        str +='        <span>'+obj.name+'</span>'
        str +='        <span>价格:'+obj.price+'&yen;</span>'
        str +='        <span>'+obj.time+'</span>'
        str +='    </div>'
        str +='</a>'

    // 设置html文本(模板)
    li.innerHTML = str;
    // 往ul标签添加li标签
    ulElement.appendChild(li);
}
// 3.0 循环data数组
for(var i = 0 ; i < data.length ; i ++){
    // 每循环一次渲染一个obj数据
    template(data[i]);
}



// template(data[0]);
// template(data[1]);
// template(data[2]);
// template(data[3]);